<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>

        <h:outputStylesheet library="css" name="index.css"  />
    </h:head>
    <h:body >

        <ui:composition template="/templates/homeTemplate.xhtml">

            <ui:define name="content">
                <div class="container">    
                    

                    <h:form>

                        <div class="row">
                        <h:inputText styleClass="search" id="searchString" title="searchString"  pt:placeholder="Search" value="#{product.product.PSearch}" >
                            <f:ajax event="keyup" render="prod results prodform" listener="#{product.SearchProducts}" execute="@form"/>
                        </h:inputText>
                        </div>  
                        
                        <div class="row">
                            <div class="col-xs-6">
                                <h:selectOneMenu styleClass="store" id="selectStore" value="#{product.product.store.ID}">
                                    <f:ajax listener="#{product.SearchProducts}" render="prod results prodform" execute="@form" />
                                    <f:selectItem noSelectionOption="true" itemLabel="Search by Store" />
                                    <f:selectItems value="#{product.stores}" var="store"  itemLabel="#{store.name}" itemValue="#{store.ID}" />

                                </h:selectOneMenu>
                            </div>
                            <div class="col-xs-6">
                                <h:panelGroup id="results">
                                    <div class="resultsc">
                                        (Max 30 per page) Results:<h:outputText   value="#{product.products.size()}"/>
                                    </div>
                                </h:panelGroup>        
                            </div>
                        </div>            

                    </h:form>


                    <div class="row">
                        
                        <h:panelGroup id="prod">
                            <h:form id="prodform" styleClass="empty">
                                <ui:repeat var="item"  value="#{product.products}"> 


                                        <div class="col-sm-3 prodcell">
                                            <div class="panel panel-primary" >
                                                
                                                <h:commandLink styleClass="empty productPanel" style="cursor:pointer;" action="#{product.ViewProduct(item,1)}">
                                                    <div class="productPanel">
                                                        <div class="panel-heading " style="height: 55px;">#{item.name}</div>
                                                        <div style="padding: 0px;" class="panel-body"><img src="https://placehold.it/200x110?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"/></div>
                                                    </div>
                                                </h:commandLink>
                                                <div class="panel-footer"  style="height: 92px;padding: 5px 15px;"> 

                                                    <div class="row" style="padding-right: 14px;">

                                                            <div class="col-xs-6">
                                                                <span class="prodPrice">£#{item.price}</span> 
                                                            </div>
                                                            <div class="col-xs-2">
                                                                <h:panelGroup id="cart">
                                                                    <h:commandButton rendered="#{cart.ProductInCart(item)}" style="width:30px;" styleClass="HbuttonMinus" action="#{cart.TakeFromCart(item)}">
                                                                        <f:ajax execute="@this" render="cart cartnum cartcost cartgtotal navbar"/>
                                                                        <span style="position: absolute;left:23px;top:8px;pointer-events: none;" class="glyphicon glyphicon-minus"></span>
                                                                    </h:commandButton> 
                                                                </h:panelGroup>
                                                            </div>
                                                            <div class="col-xs-2 prodcountdiv" style="pointer-events: none;">
                                                                <h:panelGroup id="cartnum">
                                                                    <h:outputText styleClass="prodCount" value="#{cart.GetCartQuantity(item.ID)}"/>
                                                                </h:panelGroup>
                                                            </div>
                                                            <div class="col-xs-2">
                                                                <h:commandButton  styleClass="Hbutton" value=" " style="width:30px;" action="#{cart.AddToCart(item)}">
                                                                    <span style="position: absolute;left:13px;top:8px;pointer-events: none;" class="glyphicon glyphicon-plus"></span>
                                                                    <f:ajax execute="@this" render="cart cartnum cartcost cartgtotal navbar"/>
                                                                </h:commandButton> 
                                                            </div>

                                                    </div>
                                                    <div class="row">
                                                        <div class="col align-self-center">

                                                            <hr class="separator"></hr>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col prodtext">
                                                            #{item.longName}
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            </div>
                                        </div>

                                </ui:repeat>
                            </h:form>
                        </h:panelGroup>
                        
                        <br></br>                                               
                    </div>        

                </div>
            </ui:define>
        </ui:composition>

        

    </h:body >
</html>
